<template>
	<view class="shoppingBox">
		<swiper class="swiper" circular 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in shopPhotoList" :key="index">
				<img :src=item.imgSrc  style="width: 100%;height: 100%;"  alt="">
			</swiper-item>
		</swiper>
		<view class="pointsBox">
			<view class="">可用积分</view>
			<view class="">{{pionts}}积分</view>
		</view>
		<view class="division"></view>
		<view class="body-view">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
				<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)"
					@click="swichMenu(item.id - 1)">
					<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
						<text :class="currentTab==(item.id - 1) ? 'menu-topic-act-text' : 'menu-topic-text'">{{item.name}}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 内容 -->
			<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
				<swiper-item class="swiper-topic-list">
					<scroll-view class="scroll-Y" scroll-y="ture">
						<shop-productShow></shop-productShow>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-topic-list">
					<scroll-view class="scroll-Y" scroll-y="ture">
						<shop-productShow></shop-productShow>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-topic-list">
					<scroll-view class="scroll-Y" scroll-y="ture">
						<shop-productShow></shop-productShow>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-topic-list">
					<scroll-view class="scroll-Y" scroll-y="ture">
						<shop-productShow></shop-productShow>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-topic-list">
					<scroll-view class="scroll-Y" scroll-y="ture">
						<shop-productShow></shop-productShow>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			    indicatorDots: true,
			    autoplay: true,
			    interval: 2000,
			    duration: 500,
				shopPhotoList:[
					{
						photoId:1,
						imgSrc:"/static/shop-1.jpg"
					},
					{
						photoId:2,
						imgSrc:"/static/shop-2.jpg"
					},
					{
						photoId:3,
						imgSrc:"/static/shop-3.jpg"
					}
				],
				pionts:1000,
				tabs: [{
						id: 1,
						name: '汽车'
					},
					{
						id: 2,
						name: '娃娃'
					},
					{
						id: 3,
						name: '乐器'
					},
					{
						id: 4,
						name: '飞机'
					},
					{
						id: 5,
						name: '分类名称'
					}
				],
				currentTab: 0,
				tabCurrent: 'tabNum1',

			}
		},
		methods: {
			swichMenu(id) {
				this.currentTab = id
				// console.log(11, id)
				this.tabCurrent = 'tabNum' + id
			},
			swiperChange(e) {
				// console.log(22, e.detail.current)
				let index = e.detail.current
				this.swichMenu(index)
			}
		},
		onShow() {
			
		}

	}
</script>

<style scoped lang="scss">
	.shoppingBox{
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		color: #4c4c4c;
		position: relative;
	}
	.swiper {
		height: 300rpx;
		border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
	}
	.pointsBox{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		padding: 20rpx 50rpx;
	}
	.division{
		background-color: #f2f2f2;
		height: 40rpx;
	}
	.body-view {
		height: 100vh;
		width: 100%;
		display: flex;
		// flex: 1;
		flex-direction: column;
		overflow: hidden;
		align-items: flex-start;
		justify-content: center;
	}
	
	.top-menu-view {
		display: flex;
		// position: fixed;
		// z-index: 2;
		// top: 0;
		// left: 0;
		white-space: nowrap;
		width: 100%;
		// background-color: rgb(245,180,62);
		height: 86rpx;
		line-height: 86rpx;
		// border-top: 1rpx solid #fa8c16;
	
		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;
	
			.menu-topic-text {
				font-size: 30rpx;
				color: #4c4c4c;
				// font-weight: 800;
				// text-align: center;
				padding: 10rpx 40rpx;
			}
			.menu-topic-act-text {
				font-size: 30rpx;
				color: #F5B43E;
				// font-weight: 800;
				// text-align: center;
				padding: 10rpx 40rpx;
			}
			
	
	
			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;
	
				.menu-topic-bottom-color {
					width: 100%;
					height: 6rpx;
				}
			}
	
			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}
	
			.menu-topic-act .menu-topic-bottom-color {
				background: #fa8c16;
			}
		}
	}
	
	.swiper-box-list {
		width: 100%;
		// padding-top: 100rpx;
		flex: 1;
		background-color: #FFFFFF;
	
		.swiper-topic-list {
			width: 100%;
		}
		.scroll-Y{
			height: 100%;
		}
	}
</style>
